import React from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { Button, SearchBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Image, List } from 'antd-mobile'
import Hoc_login from '../../utils/Hoc_login'
function Index() {
  const navigate = useNavigate()
    const back = () =>navigate(-1)

    const list = [
      {
        avatar:'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422',
        name:'Koto',
        title:'好的，演唱会那天准时见哦',
        date:'09:22'
      },
       {
        avatar:'https://img2.baidu.com/it/u=8013311,3592244460&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=617',
        name:'张宇航',
        title:'哦哦',
        date:'12:34'
      },
       {
        avatar:'https://img0.baidu.com/it/u=600722015,3838115472&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
        name:'李心怡',
        title:'好的，那应该很有趣',
        date:'01:19'
      },
       {
        avatar:'https://img2.baidu.com/it/u=363858033,1221485415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
        name:'王明阳',
        title:'收的',
        date:'08:00'
      },
       {
        avatar:'https://img0.baidu.com/it/u=3453008842,3158521755&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
        name:'赵佳琪',
        title:'只是下一次的想法',
        date:'07:22'
      },
       {
        avatar:'https://img2.baidu.com/it/u=3435341269,3572684113&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        name:'刘晨辰',
        title:'哦喔',
        date:'12:34'
      },
       {
        avatar:'https://img2.baidu.com/it/u=1236419345,131906300&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        name:'郑雅婷',
        title:'好的，那应该很有趣',
        date:'01:19'
      },
       {
        avatar:'https://img2.baidu.com/it/u=74749494,3176151930&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=739',
        name:'陈雨薇',
        title:'收到',
        date:'08:00'
      },
    ]

    
  return (
    <div>
       <NavBar onBack={back}>我的消息</NavBar>

       <SearchBar placeholder='这里输入关键字...' />

        <List>
      {list.map(user => (
        <List.Item
          key={user.name}
          onClick={()=>navigate('/message')}
          extra={user.date}
          prefix={
            <Image
              src={user.avatar}
              style={{ borderRadius: 20 }}
              fit='cover'
              width={40}
              height={40}
            />
          }
          description={user.title}
        >
          {user.name}
        </List.Item>
      ))}
    </List>
    </div>
  )
}

export default  Hoc_login(Index)
